<template>
  <div class="swiper-container" :ref="someRef">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in someList" :key="item.id">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  name: "Carousel",
  props: ["someList",'someRef'],
  watch: {
    // 该组件第一次挂载的时候去请求数据了，请求数据是异步的，挂载完数据还没有返回，没有数据就没有轮播结构，所以要监视bannerList的变化，一旦数据回来了，我们就要准备生成swiper实例，但是数据变化的，页面要更新，页面更新也是异步的，如果我们直接创建swiper实例，这个时候页面还没有生成轮播结构，vue内部给我们提供了一个方法$nextTick,这个方法是页面生成真实dom后才会执行，所以在这个函数内部去new我们的swiper实例，这个时候既有数据有有轮播结构
    someList: {
      handler(newVal, oldVal) {
        if (!newVal.length) {
          return;
        }
        this.$nextTick(() => {
          new Swiper(this.$refs[this.someRef], {
            loop: true,
            spaceBetween: 30, //在控制每屏间隔距离
            autoplay: {
              delay: 2000, //延迟时间  当前屏显示时间
              disableOnInteraction: false, //控制鼠标操作后要不要禁用自动轮播
            },
            pagination: {
              el: ".swiper-pagination", //选中小圆点容器
              clickable: true, //控制小圆点是否可以被点击
            },
            navigation: {
              // 获取左右按钮的容器
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
</style>
